<template>
  <div class="fatherBox">
    <div id="back"
         @click="toIndex">
      <van-icon name="arrow-left"
                color="#fff"
                size="30" />
      返回
    </div>

    <!-- 视频主体 -->
    <van-swipe style="height: calc(100vh - 50px);"
               height="calc(100vh - 50px)"
               :loop="false"
               :show-indicators="false"
               vertical
               @change="changeItem">
      <!-- 单个视频 -->
      <van-swipe-item v-for="(item,index) in list"
                      :key="item.id">
        <div class="againBtn">
          <van-button plain
                      hairline
                      type="info"
                      @click="again">再来十条</van-button>
        </div>
        <!-- 作者信息和标题 -->
        <div class="details">
          <img :src="item.userPic"
               alt="">
          <p class="title">
            <span>{{item.userName}}</span>
            <span class="titleText">{{item.title}}</span>
          </p>
        </div>
        <!-- 当前视频 -->
        <video controls
               loop
               :src="item.playUrl"
               ref="videos"></video>
        <!-- 图标 -->
        <div class="icons">
          <div @click="clickIcon('goodjob',index)">
            <van-icon name="good-job"
                      color="#fff"
                      size="25"
                      class="itemIcon"
                      ref="goodjob" />
            <p class="goodjob"
               ref="goodjobText">点赞</p>
          </div>
          <div ref="chatBox"
               @click="clickIcon('chat',index)">
            <van-icon name="chat"
                      color="#fff"
                      size="25"
                      class="itemIcon"
                      ref="chat" />
            <p class="goodjob"
               ref="chatText">评论</p>
          </div>
          <div @click="clickIcon('share',index)">
            <van-icon name="share"
                      color="#fff"
                      size="25"
                      class="itemIcon"
                      ref="share" />
            <p class="goodjob"
               ref="shareText">转发</p>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
// window.onunload = function() {
//   console.log('页面刷新完成触发');
//   window.location.href="http://localhost:8080/index/"
// }

import Footer from '../Footer'
import { getVideos } from '@/api/api'
export default {
  name: 'Video',
  components: {
    Footer,
  },
  data () {
    return {
      list: [],
    }
  },
  created () {
    this.initVideos()
    this.$store.commit('changeNav', 1)
  },
  methods: {
    toIndex () {
      this.$router.push('/index')
    },
    initVideos () {
      getVideos().then(res => {
        this.list = res.data.result.list
      })
      setTimeout(() => {
        this.$refs['videos'][0].play()
      }, 1000);
    },
    // 滑动轮播图时
    changeItem (index) {
      console.log(index);
      this.$refs['videos'].forEach((val, key) => {
        if (index == key) {
          val.play()
        } else {
          val.pause()
          val.currentTime = 0
        }
      })
    },
    clickIcon (ref, index) {
      // console.log();
      if (ref == 'goodjob') {
        if (!this.$refs[ref][index].className.includes('animate__animated')) {
          this.$toast.success(
              {
                position:top,
                msg:  '点赞成功'
              }
            )
        }
        this.$refs[ref][index].className = 'itemIcon goodjobActive van-icon van-icon-good-job animate__animated animate__bounce'
        this.$refs['goodjobText'][index].className = 'goodjob goodjobActive animate__animated animate__bounce'
      }
      if (ref == 'chat') {
        this.$refs[ref][index].className = 'itemIcon chatActive van-icon van-icon-chat animate__animated animate__backOutRight'
        this.$refs['chatText'][index].className = 'goodjob chatActive animate__animated animate__backOutRight'
        setTimeout(() => {
          this.$refs['chatBox'][index].remove()
          this.$toast.warning(
              {
                position:top,
                msg:'哎呀，评论区逃走啦！'
              })
        }, 600);
      }
      if (ref == 'share') {
        this.$refs[ref][index].className = 'itemIcon shareActive van-icon van-icon-share animate__animated animate__flip'
        this.$refs['shareText'][index].className = 'goodjob shareActive animate__animated animate__flip'
        setTimeout(() => {
          this.$toast.success({
            position:top,
            msg:'兜兜转转，还是回到了你身边！'
          })
        }, 450);
        setTimeout(() => {
          this.$refs[ref][index].className = 'itemIcon van-icon van-icon-share'
          this.$refs['shareText'][index].className = 'goodjob'
        }, 900);
      }
    },
    again () {
      this.initVideos()
    }
  }
}
</script>

<style lang='less' scoped>
// .fatherBox {
//   padding-bottom: 150px;
// }
/deep/.van-tabbar-item--active {
  background-color: transparent;
}
.footer {
  background-color: #e0e0e0;
}
video {
  position: absolute;
  width: 100%;
  left: 0;
  top: 30%;
}
/deep/.van-swipe-item {
  background-color: #141414;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}
.details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 100px;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  box-sizing: border-box;
  z-index: 999;
}
img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  margin-left: 10px;
  color: white;
  font-size: 18px;
  span:first-child {
    color: #f6af60;
    font-weight: 600;
  }
}
.titleText {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
}
#back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 10px;
  top: 30px;
  z-index: 30;
  color: white;
  font-size: 18px;
}
.icons {
  position: absolute;
  right: 15px;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 3;
  > div {
    margin-bottom: 15px;
  }
}
.itemIcon {
  position: relative;
  left: 2px;
}
.goodjob {
  margin-top: 2px;
  color: #fff;
  text-align: center;
  font-size: 14px;
}
.goodjobActive {
  color: #fd4b4a !important;
}
.chatActive {
  color: #e19f2b !important;
}
.shareActive {
  color: #2cecdf !important;
}
.againBtn {
  position: absolute;
  bottom: 20%;
  width: 100%;
  z-index: 3;
  text-align: center;
}
.van-button--plain.van-button--info {
  color: white;
  background-color: transparent;
}
/deep/.van-hairline--surround::after {
  border: 1px solid white;
  border-radius: 20px;
}
</style>